<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>模板标签</title>
	<style type="text/css">
	
	ul {
		list-style: none;
		margin: 10px 0;
		border: 1px dotted #aaa;
	}

	li{
		widows: 300px;
		padding: 5px 0;
	}

    </style>
</head>
<body>
	<div class="container">
		<h1>模板标签</h1>
		<div id="box">
			
		</div>
	</div>
<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
<script type="text/javascript">

// 模板标签
let lessons = [
  { title: "后盾人媒体查询响应式布局", author: "后盾人向军" },
  { title: "FLEX 弹性盒模型", author: "后盾人" },
  { title: "GRID 栅格系统后盾人教程", author: "古老师" }
];

var html = `<ul>	
  ${lessons.map(item => {
  	return links4`<li>作者: ${item.author}, 课程: ${item.title}</li>`
  }).join('')}

</ul>`

function links1(strings, ...args) {
	return strings.map((str, idx) => {
		return str += (args[idx] ? args[idx]: '')
	}).join('')
}

function links2(strings, ...args) {
	return strings.reduce((prev, item, idx) => {
		return prev + args[idx-1] + item 
	})
}

function links3(strings, ...args) {
	return strings.map((str, idx) => {
		return str += (args[idx] ? args[idx].replace('后盾人', '<a href="#">$&</a>') : '')
	}).join('')
}

function links4(strings, ...args) {
	return strings.reduce((prev, item, idx) => {
		return prev + (args[idx-1].replace('后盾人', '<em>$&</em>')) + item 
	})
}

box.innerHTML = html;
console.log(html)

</script>
</body>
</html>